<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简博客-简单，免费个人博客</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.jpg">
<link rel="shortcut icon" href="images/icon/icon.jpg">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->

</head>
<body class="user-select">
<header class="header">
  <nav class="navbar navbar-default" id="navbar">
    <div class="container">
      <div class="header-topbar hidden-xs link-border">
        <ul class="site-nav topmenu">
          <li><a href="links.html" rel="nofollow">友情链接</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关于作者<span class="caret"></span></a>
            <ul class="dropdown-menu header-topbar-dropdown-menu">
              <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
              <li><a href="https://www.jianshu.com/u/31ccce39a24b" target="_blank" rel="nofollow"><i class="fa fa-weibo"></i> 简书</a></li>
              <li><a href="https://www.cnblogs.com/smfx1314/" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> 博客园</a></li>
              <li><a href="https://github.com/smfx1314" target="_blank" rel="nofollow"><i class="fa fa-rss"></i> GitHub</a></li>
            </ul>
          </li>
        </ul>
        <a data-toggle="modal" data-target="#loginModal" class="login" rel="nofollow">Hi,你好</a>&nbsp;&nbsp;<!-- <a href="www.jianblog.com.cn/login" class="register" rel="nofollow">作者登录</a>&nbsp;&nbsp;<a href="" rel="nofollow"></a> --> </div>
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt=""></a></h1>
      </div>
      <div class="collapse navbar-collapse" id="header-navbar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a data-cont="首页" href="index.html">首页</a></li>
          <li><a href="tags.html">标签</a></li>
          <li><a href="readerinfo.html">留言</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<section class="container">
  <div class="content-wrap">
    <div class="content">
      <!-- banner轮播 -->
      <div id="focusslide" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#focusslide" data-slide-to="0" class="active"></li>
          <li data-target="#focusslide" data-slide-to="1"></li>
          <li data-target="#focusslide" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active"> <a href="" target="_blank"><img src="images/banner/banner_01.jpg" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
          <div class="item"> <a href="" target="_blank"><img src="images/banner/banner_02.jpg" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
          <div class="item"> <a href="" target="_blank"><img src="images/banner/banner_03.jpg" alt="" class="img-responsive"></a> 
            <!--<div class="carousel-caption"> </div>--> 
          </div>
        </div>
        <a class="left carousel-control" href="#focusslide"  role="button" data-slide="prev" rel="nofollow"> 
        	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        	<span class="sr-only">上一个</span> 
        </a> 
        <a class="right carousel-control" href="#focusslide"  role="button" data-slide="next" rel="nofollow"> 
        	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        	<span class="sr-only">下一个</span> 
        </a> 
      </div>
        
        <!-- 文章排版 -->
        <div id="container" style="width: 625px">
         <!--  <article class="excerpt excerpt-1">
            <input type="hidden" id="blog-id">
             <img id="blog-img" class="thumb" data-original="images/excerpt.jpg" src="images/excerpt.jpg" alt="">
            <header>
              <a class="cat" href="program">blog<i></i></a>
              <h2>
                <a id="blog-title" href="article.html" title=""></a>
              </h2>
            </header>
            <p class="meta">
              <time class="time">
                <i id="blog-time" class="glyphicon glyphicon-time"></i>
              </time>
            <p id="blog-description" class="note"></p>
          </article> -->
        </div>
        <span id="scroll_loading" style="text-align: center;"></span>
    </div>
  </div>

  <!-- 侧边栏 -->
  <aside class="sidebar">
    <!-- 公告/联系作者 -->
    <div class="fixed">
      <div class="widget widget-tabs">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">网站公告</a></li>
          <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">联系作者</a></li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane notice active" id="notice">
            暂无公告
          </div>
          <div role="tabpanel" class="tab-pane contact" id="contact">
            <a href="#" data-toggle="tooltip" data-placement="bottom">1016767658@qq.com</a></h2>
          </div>
        </div>
      </div>
      <!-- 搜索功能 -->
      <div class="widget widget_search">
        <form class="navbar-form" method="post">
          <div class="input-group">
            <input type="text" id="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
            <span class="input-group-btn">
            <button class="btn btn-default btn-search" id="search" type="button">搜索</button>
            </span> 
          </div>
        </form>
      </div>
    </div>
     <!-- 添加公告栏时钟 -->
    <div class="widget widget_sentence">
      <div id="clockdiv" style="text-align: center;">
          <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
      </div>
    </div>
    <!-- 分类 -->
    <div class="widget widget_hot">
      <h3>分类</h3>
      <ul>
        <li><a href=""><span class="thumbnail"></span></a></li>
      </ul>
    </div>
  </aside>
</section>
<!-- 脚部 -->
<footer class="footer">
  <div class="container">
    <p>&copy; 2019 <a href="">jianblog.com</a> &nbsp; <a href="#" target="_blank" rel="nofollow">豫ICP备20191109-1</a> &nbsp; &nbsp; <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
  </div>
  <div id="gotop"><a href="#" class="gotop"></a></div>
</footer>
<!--微信二维码模态框-->
<div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
  <div class="modal-dialog" role="document" style="margin-top:120px;max-width:280px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫(备注)</h4>
      </div>
      <div class="modal-body" style="text-align:center"> <img src="images/weixin.jpg" alt="" style="cursor:pointer"/> </div>
    </div>
  </div>
</div>

<!--登录注册模态框-->
<!-- <div class="modal fade user-select" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form action="/Admin/Index/login" method="post">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="loginModalLabel">登录</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="loginModalUserNmae">用户名</label>
            <input type="text" class="form-control" id="loginModalUserNmae" placeholder="请输入用户名" autofocus maxlength="15" autocomplete="off" required>
          </div>
          <div class="form-group">
            <label for="loginModalUserPwd">密码</label>
            <input type="password" class="form-control" id="loginModalUserPwd" placeholder="请输入密码" maxlength="18" autocomplete="off" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">登录</button>
        </div>
      </form>
    </div>
  </div>
</div> -->

<!-- 打赏码 -->
<script>
    window.tctipConfig = {
      staticPrefix: "http://static.tctip.com",
      buttonImageId: 7,
      buttonTip: "dashang",
      list:{
        alipay: {qrimg: "https://files-cdn.cnblogs.com/files/smfx1314/zhifubao.bmp"},
        weixin:{qrimg: "https://files-cdn.cnblogs.com/files/smfx1314/weixin.bmp"},
      }
    };
</script>
<script src="https://files.cnblogs.com/files/hafiz/tctip.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/myRewards.css">

<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script>



<script type="text/javascript">
/**
* 定义全局contents数组信息
* 把返回的data数据都放入这个数据，然后在遍历数组
*/
var contentsList = [];
//发送ajax请求，获取contents信息
$(function(){

  var totalRecord,currentPage;
  var pageNum=1;
  to_page(pageNum);
     /**
     * 1.显示所有数据
     * @param pn
     */
    function to_page(pageNum) {
        $.ajax({
            url:"http://localhost:8081/blog/getAllBlog",
            type:"GET",
            xhrFields:{
            	widthCredentials:true
            },
            data:{
              "pageNum": pageNum
            },
            success:function (result) {
                if (0 == result.code){
                   contentsList = result.data.list;
                   //解析数据
                   reloadDom();
                }
            }

        });
    }



	/**
	 * contents列表浏览
	 * 遍历数组，append到tbody中
	 * 之后给每行添加id，方便获取每个content的详情信息
	 */
	function reloadDom(){
	    //$("#container").empty();
	    for (var i=0; i<contentsList.length; i++) {
	        var contentDo = contentsList[i];
	        var dom = "<article class='excerpt excerpt-1'>\n" +
	        "    <span class='focus'>\n" +
	        "        <img class='thumb' src='http://localhost:8080/image/"+contentDo.titleUrl+"'></span>\n" +
	        "    <header>\n" +
	        "        <a class='cat' href='program'>简blog</a>\n" +
	        "        <h2>\n" +
	        "            <a id='blog-title"+contentDo.bid+"' value='"+contentDo.bid+"'>"+contentDo.title+"</a>\n" +
	        "        </h2>\n" +
	        "    </header>\n" +
	        "    <p class='meta'>\n" +
	        "        <time class='time'>\n" +
	        "            <i id='blog-time' class='glyphicon glyphicon-time'>"+contentDo.created+"</i>\n" +
	        "        </time>\n" +
	        "    <p class='note'>"+contentDo.description+"</p>\n" +
	        "</article>";
	            //添加到tbody容器中
	        $("#container").append($(dom));
	        /**
	         * 给文章绑定一个点击事件，点击并传递id参数，跳转至content详情页面并根据id查询
	         * @param  {String} ) {                       window.location.href [description]
	         * @return {[type]}   [description]
	         */
	        $('#blog-title'+contentDo.bid).on("click",function(){
	        	var id=$(this).attr("value");
		        window.location.href="blog-article.html?id="+id;
	        })
	    }
	}

 	/**
     * 搜索
     */
    $("#search").on("click",function(){
    	var keyword = $("#keyword").val();
    	if (keyword =="") {
    		alert("请输入关键字")
    		return false;
    	}
    	$.ajax({
            url:"http://localhost:8081/blog/getBlogByFuzzyQuery",
            type:"GET",
            xhrFields:{
            	widthCredentials:true
            },
            data:{
              "keyword": keyword
            },
            success:function (result) {
                if (0 == result.code){
                   serachList = result.data;
                   keywordSerach();

                }
            }

        });
    })

    /**
	 * serachList列表浏览
	 * 遍历数组，append到tbody中
	 * 之后给每行添加id，方便获取每个content的详情信息
	 */
	var serachList = [];
	function keywordSerach(){
	    $("#container").empty();
	    isbool=false;
	    for (var i=0; i<serachList.length; i++) {
	        var contentDo = serachList[i];
	        var dom = "<article class='excerpt excerpt-1'>\n" +
	        "    <span class='focus'>\n" +
	        "        <img class='thumb' src='http://localhost:8080/image/"+contentDo.titleUrl+"'></span>\n" +
	        "    <header>\n" +
	        "        <a class='cat' href='program'>简blog</a>\n" +
	        "        <h2>\n" +
	        "            <a id='blog-title"+contentDo.bid+"' value='"+contentDo.bid+"'>"+contentDo.title+"</a>\n" +
	        "        </h2>\n" +
	        "    </header>\n" +
	        "    <p class='meta'>\n" +
	        "        <time class='time'>\n" +
	        "            <i id='blog-time' class='glyphicon glyphicon-time'>"+contentDo.created+"</i>\n" +
	        "        </time>\n" +
	        "    <p class='note'>"+contentDo.description+"</p>\n" +
	        "</article>";
	            //添加到tbody容器中
	        $("#container").append($(dom));
	        /**
	         * 给文章绑定一个点击事件，点击并传递id参数，跳转至content详情页面并根据id查询
	         * @param  {String} ) {                       window.location.href [description]
	         * @return {[type]}   [description]
	         */
	        $('#blog-title'+contentDo.bid).on("click",function(){
	        	var id=$(this).attr("value");
		        window.location.href="blog-article.html?id="+id;
	        })
	    }
	}

	/**
    * 滚动加载
    */
   	var isbool = true;//触发开关，防止多次调用事件  
   	$(window).scroll(function() {
   		//获得的是滚动条的高度
   		var scrollerh = $(document).scrollTop();
   		//获得当前窗体可视区域的高度
        var viewbody = $(window).height();
        //获得整个文档的高度
        var allbody = $(document).height();
        if (scrollerh + viewbody > allbody - 100 && isbool==true) {
        	isbool=false;
            to_page(pageNum+1)
        }
	});
   	
   
	/**
	 * 网站公告
	 */
   $.ajax({
        url:"http://localhost:8081/blog/selectNotice",
        type:"GET",
        xhrFields:{
        	widthCredentials:true
        },
        success:function (result) {
            if (0 == result.code){
               content = result.data.content;
               $("#notice").empty();
               $("#notice").append(content);
            }
        }

    });
});
</script>
</body>
</html>